<template>
  <h2 class="text-3xl font-semibold leading-7 text-gray-900 mb-3">BMC</h2>

  <el-row class="mb-10">
    <!-- BMC Firmware -->
    <bmc-cards :is-page-disabled="isPageDisabled" />
  </el-row>

  <h2 class="text-3xl font-semibold leading-7 text-gray-900 mb-3">
    {{ $t('pageFirmware.sectionTitleUpdateFirmware') }}
  </h2>
  <form-update
    :is-server-off="isServerOff"
    :is-page-disabled="isPageDisabled"
  />
  <firmware-version-list />
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/store/global';
import { useFirmwareStore } from '@/store/Settings/FirmwareStore';
import { useControlStore } from '@/store/Settings/ControlStore';
import bmcCards from './FirmwareCardsBmc.vue';
import FormUpdate from './FirmwareFormUpdate.vue';
import FirmwareVersionList from './FirmwareVersionList.vue';

const globalStore = useGlobalStore();
const firmwareStore = useFirmwareStore();
const controlStore = useControlStore();
const isServerPowerOffRequired =
  import.meta.env.VUE_APP_SERVER_OFF_REQUIRED === 'true';
const serverStatus = computed(() => globalStore.serverStatus);
const isServerOff = computed(() => {
  return serverStatus.value === 'off' ? true : false;
});
const isOperationInProgress = computed(
  () => controlStore.isOperationInProgress,
);
const isPageDisabled = computed(() => {
  if (isServerPowerOffRequired) {
    return !isServerOff.value || isOperationInProgress.value;
  }
  return isOperationInProgress.value;
});

onMounted(() => {
  firmwareStore.getFirmwareInformation();
});
</script>
